<!DOCTYPE html>
<html>

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        
		<title>JQuery Tabs</title>
        
        <!-- Stylesheet -->
		<link type="text/css" 
        	  href="css/flick/jquery-ui-1.8.16.custom.css" 
              rel="stylesheet" />	
              
        <!-- JQuery -->
		<script type="text/javascript" 
				src="js/jquery-1.6.2.min.js">
        </script>
        
        <!-- JQuery UI -->
		<script type="text/javascript" 
				src="js/jquery-ui-1.8.16.custom.min.js">
        </script>
        
        <!-- JQuery Tabs initialisieren -->
		<script type="text/javascript">
			$(function(){
				
				var icons = {
					header: "ui-icon-circle-arrow-e",
					headerSelected: "ui-icon-circle-arrow-s"
				};

				// Accordion --> Event Click
				$("#accordion").accordion({ icons: icons, event: "click", header: "h3" });
				
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>

	</head>
    
	<body>
    
        <h1><!-- Accordion --></h1>
        <div id="accordion">
          		<div>
           			<h3><a href="#">Hello Tab 01</a></h3>
                    <div>Hello Tab 01 Content</div>
                </div>
                <div>
                    <h3><a href="#">Hello Tab 02</a></h3>
                    <div>Hello Tab 02 Content</div>
                </div>
                <div>
                    <h3><a href="#">Hello Tab 03</a></h3>
                    <div>Hello Tab 03 Content</div>
                </div>
            </div>
	</body>
</html>


